<template>
  <!-- 年度使用 -->
  <div id="AnnualUseChart" class="echarts"></div>
</template>

<script setup lang="ts">
  import { ECharts, EChartsOption, init } from "echarts"
  interface ChartProp {
    label: string
    value: string[]
  }
  const initChart = (data: any = {}): ECharts => {
    const charEle = document.getElementById("AnnualUseChart") as HTMLElement
    const gradientColors = ["rgba(254, 219, 101,0.1)", "rgba(0, 122, 254,0.1)", "rgba(255, 75, 122, 0.1)"]
    const charEch: ECharts = init(charEle)
    const option: EChartsOption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none"
        },
        borderWidth: 0, //边框线宽
        padding: 0,
        backgroundColor: "transparent",
        formatter: (p: any) => {
          let str = ""
          p.forEach((val: any) => {
            str += `
          <div class="year-item">
            <span class="year-dot" style="background-color: ${val.color};"></span>
            <span class="year-name">${val.seriesName}</span>
            <span class="year-value">${val.data >= 10000 ? (val.data / 10000).toFixed(2) + "w" : val.data}</span>
          </div>
          `
          })
          let dom = `
                    <div class="annual-tooTip">
                      <span class="annual-month">${p[0].dataIndex + 1}月</span>
                      <div class="annual-list">
                        ${str}
                      </div>
                    </div>
                  `
          return dom
        }
      },

      legend: {
        right: "2%",
        top: "0%",
        itemWidth: 15,
        itemHeight: 6,
        align: "auto",
        icon: "rect",
        itemGap: 15,
        textStyle: {
          color: "#ebebf0"
        }
      },
      grid: {
        top: "20%",
        left: "40",
        right: "4%",
        bottom: "15%"
        // containLabel: true
      },
      xAxis: [
        {
          name: "(月份)",
          type: "category",
          boundaryGap: false,
          axisLine: {
            // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#233653"
            }
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            color: "#7ec7ff",
            padding: 0,
            fontSize: 12,
            formatter: function (data) {
              return data
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#192a44"
            }
          },
          axisTick: {
            show: false
          },
          data: data.columns
        }
      ],
      yAxis: {
        name: "(人数)",
        nameTextStyle: {
          color: "#D6DFEA",
          fontSize: 12,
          padding: [0, 30, 0, 0]
        },
        // nameGap:18,
        minInterval: 1,
        // min: 4,
        splitNumber: 5,
        splitLine: {
          show: false,
          lineStyle: {
            color: "#192a44"
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#233653"
          }
        },
        axisLabel: {
          show: true,
          color: "#B9D6D6",
          padding: 0,
          formatter: function (value: any) {
            if (value >= 10000) {
              value = value / 10000 + "w"
            }
            return value
          }
        },
        axisTick: {
          show: false
        }
      },
      series: data.data.map((val: ChartProp, index: number) => {
        return {
          name: val.label,
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          showSymbol: false,
          smooth: true,
          lineStyle: {
            width: 1,
            color: data.colors[index], // 线条颜色
            borderColor: data.colors[index]
          },
          itemStyle: {
            color: data.colors[index],
            borderColor: "#646ace",
            borderWidth: 2
          },
          tooltip: {
            show: true
          },
          areaStyle: {
            // 区域填充样式
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: data.colors[index] // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: gradientColors[index] // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            },
            shadowColor: "rgba(25,163,223, 0.3)", //阴影颜色
            shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
          data: val.value
        }
      })
    }
    charEch.setOption(option)
    return charEch
  }
  defineExpose({
    initChart
  })
</script>
<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
  :deep(.annual-tooTip) {
    box-sizing: border-box;
    width: 206px;
    height: 103px;
    padding: 5px 20px;
    background: url("../images/contrast-bg.png") no-repeat;
    background-size: 100% 100%;
    .annual-month {
      display: inline-block;
      margin-bottom: 2px;
      font-size: 10px;
      color: #03b8e2;
      transform: scale(0.9);
    }
    .annual-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      .year-item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 22px;
        .year-dot {
          width: 5px;
          height: 5px;
          margin: 0 2px;
          border-radius: 50%;
        }
        .year-name,
        .year-value {
          font-size: 10px;
          color: #03b8e2;
          transform: scale(0.8);
        }
        .year-name {
          margin: 0 2px;
        }
        .year-value {
          display: inline-block;
          width: 25%;
        }
      }
    }
  }
</style>
